<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>别踩白块</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 400px;
      height: auto;
      margin: 30px auto 0;
      border: 1px solid #222;
    }

    .content {
      position: relative;
      width: 400px;
      height: 600px;
      overflow: hidden;
    }

    .content .go {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
      width: 400px;
      text-align: center;
      font: 700 60px '微软雅黑';
    }

    .go span {
      cursor: pointer;
      background-color: #fff;
      border-bottom: 1px solid #222;
    }

    .content .main {
      position: absolute;
      top: -150px;
      left: 0;
      width: 400px;
      height: 600px;
    }

    .main .row {
      width: 400px;
      height: 150px;
    }

    .main .row div {
      float: left;
      width: 99px;
      height: 149px;
      border-bottom: 1px solid #222;
      border-right: 1px solid #222;
      cursor: pointer;
    }

    .main .row div:last-child {
      width: 100px;
      border-right: none;
    }

    .count {
      width: 400px;
      height: 50px;
      text-align: center;
      border-top: 1px solid #222;
      font: 700 32px/50px '微软雅黑';
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="content">
      <div class="go">
        <span class="tip">点击开始</span>
      </div>
      <div class="main">
        <!-- 
          <div class="row">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div> 
        -->
      </div>
    </div>
    <div class="count"></div>
  </div>
</body>

</html>
<script>
  // 获取元素
  const main = document.querySelector('.main');
  const go = document.querySelector('.go');
  const tip = document.querySelector('.tip');
  const count = document.querySelector('.count');

  // 动态创建div
  function createEle() {
    let row = document.createElement('div');
    row.className = 'row';
    for (let i = 0; i < 4; i++) {
      let col = document.createElement('div');
      row.appendChild(col);
    }
    main.childElementCount === 0 ? main.appendChild(row) : main.insertBefore(row, main.firstElementChild);
    let index = Math.floor(Math.random() * row.childElementCount);
    row.children[index].className = 'i';
    row.children[index].style.backgroundColor = getColor();
  }

  let speed = 5,
    score = 0,
    timer = null;

  // 移动白块
  function move() {
    timer = setInterval(() => {
      main.style.top = parseInt(window.getComputedStyle(main)['top']) + speed + 'px';
      if (parseInt(window.getComputedStyle(main)['top']) >= 0) {
        createEle();
        main.style.top = '-150px';
      }
      if (main.childElementCount === 6) {
        for (let i = 0; i < 4; i++) {
          if (main.lastElementChild.children[i].className === 'i') {
            clearInterval(timer);
            go.style.display = 'block';
            tip.innerHTML = '重新开始';
            count.innerHTML = '游戏结束，最高得分：' + score;
            main.removeEventListener('click', blockClick);
          }
        }
        main.removeChild(main.lastElementChild);
      }
    }, 20);
    main.addEventListener('click', blockClick);
  }

  // 点击方块
  function blockClick(e) {
    let t = e.target;
    if (t.className === 'i') { // 点中了带颜色的方块
      t.className = '';
      t.style.backgroundColor = '#ddd';
      score++;
      count.innerHTML = '当前得分：' + score;
    } else if (t.innerHTML === '' && t.className !== 'i' && t.style.backgroundColor === '') { // 点中了白块
      clearInterval(timer);
      go.style.display = 'block';
      tip.innerHTML = '重新开始';
      count.innerHTML = '游戏结束，最高得分：' + score;
      main.removeEventListener('click', blockClick);
    }
    if (score % 10 === 0) speed++;
  }

  // 开始游戏
  tip.addEventListener('click', () => {
    main.innerHTML = '';
    count.innerHTML = '游戏开始';
    go.style.display = 'none';
    move();
    if (tip.innerHTML === '重新开始') window.location.href = './别踩白块.html';
  });

  // 随机颜色
  function getColor() {
    return `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`;
  }
</script>